import { ElPopover, ElLink, ElImage } from 'element-plus'
import AliIcon from '~/components/AliIocn'
import weeklyHelpInfoOnLight from '~/assets/weeklyHelpInfoOnLight.png'
import weeklyHelpInfoOffLight from '~/assets/weeklyHelpInfoOffLight.png'
import { MODAL_NORMAL_WIDTH } from '~/utils/const'
import styles from '../../index.module.scss'

export default function WeeklyTasksTips() {
  return (
    <ElPopover
      placement="bottom-start"
      trigger="click"
      width={MODAL_NORMAL_WIDTH}
      v-slots={{
        reference: () => (
          <ElLink type="primary" underline={false} icon={<AliIcon type="icon-tixing" />}>
            帮助说明
          </ElLink>
        )
      }}
    >
      <section class={styles['weekly-tasks-tips-content']}>
        <ElImage class={styles['weekly-tasks-tips-img']} src={weeklyHelpInfoOnLight} />
        <br />
        假设日落时间为：18:24，
        <br />
        偏移设置的开灯日落偏移为：15分钟，则最后开灯时间为：18:39。即在18:39平台会下发开灯指令。
        光控设置的有效时间为：60分钟，则光控作用时间范围：17:39-18:39，在这个时间段内，光控值
        低于设定开灯光控值：40 Lux，平台也会下发开灯指令。
        <br />
        <ElImage class={styles['weekly-tasks-tips-img']} src={weeklyHelpInfoOffLight} />
        <br />
        假设日出时间为：06:24，
        <br />
        偏移设置的关灯日出偏移为：15分钟，则最后关灯时间为：06:39。即在06:39平台会下发关灯指令。
        光控设置的有效时间为：60分钟，则光控作用时间范围：05:39-06:39，在这个时间段内，光控值
        高于设定关灯光控值：40 Lux，平台也会下发关灯指令。
      </section>
    </ElPopover>
  )
}
